<template>
  <custom-dialog custom-class="custom-web" :title="computedTitle" :width="width" v-model="isVisible"
    :disabled="disabled" :show-close="disabled" :center="center" @close="handleClose">
    <el-form :model="state.formData" :rules="state.formRules" size="large" label-position="top" ref="formRef">
      <el-form-item label="地址信息" prop="id" v-show="false"></el-form-item>
      <el-form-item label="地址信息" required>
        <el-form-item prop="province" style="width:33%">
          <el-select style="width: 100%" v-model="state.formData.province" filterable clearable placeholder="请选择省份">
            <el-option v-for="item in provinceList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item prop="city" style="width:33%">
          <el-select style="width: 100%" v-model="state.formData.city" filterable clearable placeholder="请选择市">
            <el-option v-for="item in cityList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item prop="district" style="width:33%">
          <el-select style="width: 100%" v-model="state.formData.district" filterable clearable placeholder="请选择县区">
            <el-option v-for="item in districtList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="state.formData.address" type="textarea" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="收货人姓名" prop="consignorName">
        <el-input v-model="state.formData.consignorName" placeholder="请输入收货人姓名" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="state.formData.phone" placeholder="请输入手机号码" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="bottom-btns" style="flex: 1">
        <el-button plain style="height: 46px;padding: 12px 37px;" :loading="state.isSave" @click="handleClose">{{
          cancelButtonText
        }}</el-button>
        <el-button style="height: 46px;padding: 12px 37px;" v-for="(b, i) in state.buttonList" :loading="state.isSave" :key="'btn' + i" :color="b.color"
          :type="b.type || 'default'" :disabled="b.disabled" @click="b.command">{{ b.label
          }}</el-button>
      </div>
    </template>
  </custom-dialog>
</template>
<script setup name="addressForm">
import { appAddressEditPost } from '@/api/address'
import pca from '@/assets/pca.json'
import { nextTick } from 'vue';

const props = defineProps({
  cancelButtonText: {
    type: String,
    default: '返回'
  },
  center: Boolean,
  disabled: Boolean,
  width: {
    type: String,
    default: '500px'
  },
  customTitle: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['change', 'init'])
const state = reactive({
  formData: { // appAddressEditPost 请求参数对象
    id: undefined, // id string-query
    address: undefined, // 详细地址 string-query
    consignorName: undefined, // 姓名 string-query
    phone: undefined, // 手机号 string-query
    province: undefined, // 省 string-query
    city: undefined, // 市 string-query
    district: undefined // 区 string-query
  },
  formRules: {
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    consignorName: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    province: [{ required: true, message: '请选择省', trigger: 'change' }],
    city: [{ required: true, message: '请选择市', trigger: 'change' }],
    district: [{ required: true, message: '请选择区', trigger: 'change' }]
  },
  isVisible: false,
  isSave: false,
  buttonList: [
    {
      label: '保存',
      disabled: false,
      color: '#D6000F',
      command: () => {
        formRef.value.validate((valid) => {
          if (valid) {
            state.isSave = true
            appAddressEditPost({ body: state.formData }).then(() => {
              bindChange(true)
            }).finally(() => {
              state.isSave = false
            })
          }
        })
      }
    }
  ],
  initDefault: true
})
const isVisible = ref(false)
const computedTitle = computed(() => props.customTitle || '收货地址管理')

const formRef = ref(null)

// 省列表
const provinceList = Object.keys(pca)
// 市列表
const cityList = computed(() => {
  return state.formData.province ? Object.keys(pca[state.formData.province]) : []
})
// 县区列表
const districtList = computed(() => {
  return state.formData.province && state.formData.city
    ? pca[state.formData.province][state.formData.city]
    : []
})
// 监听省份变化
watch(
  () => state.formData.province,
  (newVal) => {
    if (state.initDefault) {
      state.formData.city = undefined
      state.formData.district = undefined
    }
  }
)
// 监听市区变化
watch(
  () => state.formData.city,
  (newVal) => {
    if (state.initDefault) {
      state.formData.district = undefined
    }
  }
)

function handleClose () {
  isVisible.value = false
  resetFields()
}
function bindChange (e) {
  emit('change', e)
  e && handleClose()
}

function bindFormInfo (e) {
}
function setDefault (e) {
  state.initDefault = false
  for (const key in e) {
    if (Object.hasOwnProperty.call(state.formData, key)) {
      state.formData[key] = e[key]
    }
  }
  nextTick(() => {
    state.initDefault = true
    isVisible.value = true
  })
}
function resetFields () {
  if (formRef.value) {
    formRef.value.resetFields()
    nextTick(() => {
      formRef.value.$nextTick(() => {
        formRef.value.clearValidate()
        state.initDefault = false
      })
    })
  }
}
defineExpose({
  bindFormInfo,
  setDefault,
  resetFields,
  show: () => {
    isVisible.value = true
  }
})
</script>
